<template>
	<view :class="currentTheme">
		<a-nabbar :name="option.label" />
		<!-- <view class="content-desc-item u-font-26 u-text-center u-padding-38" v-if="option.icon==='wodeyixiang'">
			参与过测本的剧本就可以提交意向噢！
		</view> -->
		<view class="u-padding-32">
		 <item-search placeholder="搜索店家、城市或剧本名" @change="setDown" v-model="wantForm.name"></item-search>
		</view>
		<view class="u-flex sticky-tabs  u-padding-left-32 u-padding-right-32" :style="{top:top}">
			<view class="u-flex-1">
				<me-tabs v-model="indexCurrent"  :height="88" :tabs="tabs" @change="tabGetChange" activeColor="#765CFE" @tabTop="getTabTop"></me-tabs>
			</view>
			<view class="right-search u-flex u-row-center" @click="showSearchBox">
				<text class="u-font-32 box-title u-margin-right-10">筛选</text>
				<u-icon name="shaixuan" custom-prefix="index-custom-icon" size="27"></u-icon>
			</view>
		</view>
		<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
			<swiper-item  v-for="(a,b) in tabs" :key="b" >
				<mescroll-item :tabIndex="b" :tab="a" :inputName="wantForm.name" ref="mescroll" @goPathDetail="getDetail"></mescroll-item>
			</swiper-item>
		</swiper>
		<u-popup mode="bottom" v-model="searchPopFlag" borderRadius="26" :mask-close-able="maskClickFlag">
			<view class="pop-title u-text-center u-font-36 box-title text-bold">筛选</view>
			<view class="u-padding-left-32 u-padding-right-32">
				<view class="u-font-32 box-title search-item-title text-bold">时间</view>
				<view class="search-container">
					<select-item  v-model="wantForm.startTimeStr" mode="time" ref="startTimeView" @getSelect="getTimeChange" @actionSheetClick="getActionSheetClick"/>
					<view class="u-text-center u-font-28 box-title text-bold u-margin-top-26 u-margin-bottom-26">至</view>
					<select-item  v-model="wantForm.endTimeStr" mode="time"  ref="endTimeView"  @getSelect="getTimeChange"   @actionSheetClick="getActionSheetClick"/>
				</view>
				<view class="search-box-btns u-flex">
					<view class="reset-btn search-btn u-flex-1 u-font-32 box-title text-bold" @click="resetTime">
						重置
					</view>
					<view class="confirm-btn search-btn u-flex-1 u-font-32 text-white text-bold" @click="confirmSearch">完成</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import pageMixins from '@/pages/pageMixins.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	import swiperListMixin from '@/mixins/swiperList.js'
	import MescrollItem from "./swiperItem.vue";
	import dayjs from 'dayjs'
	export default {
		mixins:[pageMixins,swiperListMixin],
		data() {
			return {
				apiModule:'shopApi',
				apiType:'userIntention',
				name:"findSmallPage",
				customStyle:{
					backgroundColor:'#765CFE',
					borderColor:'none'
				},
				otherHeight:"152rpx",
				option:{
					label:''
				},
				tabs:[{
					name:'公车意向', list: null,type:'drive_car'
				},{
					name:'OB意向', list: null,type:'ob'
				}],
				wantForm:{
					name:'',
					startTime:'',
					endTime:'',
					startTimeStr:"",
					endTimeStr:""
				},
				searchPopFlag:false,
				maskClickFlag:true
			}
		},
		components: {
			itemSearch,MescrollItem
		},
		onLoad(option) {
			this.option = option
		},
		methods: {
			setDown(){
				const ref = this.$refs.mescroll;
				ref.forEach(val=>{
					val.form = {...val.form,...this.wantForm};
					val.downCallback()
				})
			},
			getDetail(item) {
				this.$u.route({
					url:'/pagesA/want/detail',
					params:{
						...this.option,
						id:item.id
					}
				})
			},
			showSearchBox(){
				this.searchPopFlag = true;
			},
			//获取选择的时间 判断开始时间不能小于结束时间
			getTimeChange(item){
				setTimeout(()=>{
					const startTimeref = this.$refs.startTimeView;
					const endTimeref = this.$refs.endTimeView;
					console.log(startTimeref.value)
					console.log(endTimeref.value)
					const startTime = startTimeref.value ? startTimeref.value+" 00:00:00" : ''
					const endTime = endTimeref.value ? endTimeref.value+" 00:00:00" : ''
					if(startTimeref.value && endTimeref.value&&dayjs(startTime).unix()>dayjs(endTime).unix()){
						uni.showModal({
							showCancel:false,
							content:'结束时间小于开始时间，请重新设置',
							title:'温馨提示'
						})
						return false;
					}
					this.wantForm.startTime = startTime;
					this.wantForm.endTime = endTime
				},10)
			},
			confirmSearch(){
				this.searchPopFlag = false;
				this.setDown()
			},
			getActionSheetClick(flag){
				this.maskClickFlag = !flag
			},
			resetTime(){
				this.wantForm.startTime = '';
				this.wantForm.startTimeStr = '';
				this.wantForm.endTime = '';
				this.wantForm.endTimeStr = ''
			}
		},
	}
</script>

<style lang="scss" scoped>
	.addlarp-btn-box{
		padding: 0 283rpx;
	}
	.page-title{
		&::after{
			content: '';
			display: block;
			height: 4rpx;
			width: 320rpx;
			margin: 27rpx auto;
			background-color: $primary;
		}
	}
	.right-search{
		width: 30.5vw;
		position: relative;
		&::before{
			content: "";
			position: absolute;
			width: 1rpx;
			height: 29rpx;
			border-left: 1rpx solid var(--line-color);
			top: 50%;
			left: 0;
			margin-top: -15rpx;
		}
	}
	.pop-title{
		line-height: 104rpx;
	}
	.search-item-title{
		margin-bottom: 48rpx;
	}
	.search-container{
		width: 365rpx;
		margin: 0 auto 64rpx;
	}
	.search-box-btns{
		margin-bottom: 60rpx;
		.search-btn{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.reset-btn{
			background: var(--background-second-color);
			border-radius: 44rpx 0 0 44rpx;
		}
		.confirm-btn{
			background: var(--theme-color);
			border-radius: 0 44rpx 44rpx 0;
		}
	}
</style>
